<template>
  <div class="tag-group-wrapper">
    <div class="tag-group-header">
      <div class="header-text">{{headerText}}</div>
      <div
        class="header-btn"
        @click="onBtnClick"
      >{{btnText}}</div>
    </div>
    <div class="tag-group">
      <div
        class="tag-group-inner"
        v-for="(item, index) in value"
        :key="index"
      >
        <Tag
          :text="item"
          @onClick="onTagClick(item,index)"
        ></Tag>
      </div>
    </div>
  </div>
</template>

<script>
import Tag from './Tag'
export default {
  components: { Tag },
  props: {
    headerText: String,
    btnText: String,
    value: Array
  },
  mounted () {
  },
  data () {
    return {
      value: [],
      btnText: '',
      headerText: ''
    }
  },
  methods: {
    // 标签点击事件
    onTagClick (text, index) {
      this.$emit('onTagClick', text, index)
      console.log('tag-group-onTagClick', text, index)
    },
    // 按钮点击事件
    onBtnClick () {
      this.$emit('onBtnClick')
      console.log('tag-group-onBtnClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.tag-group-wrapper {
  margin-top: 5px;
  padding: 0 14px;
  width: 100%;
  box-sizing: border-box;
  .tag-group-header {
    display: flex;
    padding: 0 2px;
    justify-content: space-between;
    .header-text {
      line-height: 20px;
      font-size: 18px;
      color: #333333;
    }
    .header-btn {
      line-height: 20px;
      font-size: 18px;
      color: #3696ef;
    }
  }
  .tag-group {
    padding-top: 16px;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    .tag-group-inner {
      box-sizing: border-box;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding: 0 6px 12px 6px;
    }
  }
}
</style>